<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <!-- <iframe
      src="https://www.taobao.com"
      frameborder="0"
      width="100%"
      height="100%"
    ></iframe> -->
    <h1>父应用</h1>
    <!-- <iframe id="child" src="./03.child.html" frameborder="0"></iframe> -->
    <iframe
      id="child"
      src="http://127.0.0.1:5501/03.child.html"
      frameborder="0"
    ></iframe>
    <script>
      // 获取子应用的cookie
      // const child = document.getElementById("child");
      // // child.contentWindow; // 子应用window
      // // child.contentDocument; // 子应用document
      // console.log("父应用", child.contentDocument.cookie);

      // // 获取子应用的DOM元素，需要等子应用加载完成才行
      // child.contentWindow.onload = function () {
      //   console.log(child.contentDocument.querySelector(".title"));
      // };
      // console.log(child.contentDocument.querySelector(".title"));

      /*
        主应用和子应用不同源，父应用就不能获取子应用的任何内容
          同源：协议名、域名、端口号三者必须完全一致

          解决：postMessage 方法 和 message 事件的方式进行通信
            postMessage，用来发送数据
            message事件，用来接受数据
      */
      const child = document.getElementById("child");
      document.querySelector("h1").onclick = function () {
        // 父向子发送消息（触发事件）
        child.contentWindow.postMessage(
          "父应用发送给子应用的数据", // 通信的数据
          "http://127.0.0.1:5501" // 通信的地址
        );
      };

      window.addEventListener("message", function (e) {
        console.log(e.data);
      });

      /*
        总结：
          1. 概念
            能在当前页面嵌套其他页面（能在当前应用嵌套其他子应用）
          2. 问题
            同源情况下, 可以通过iframe标签直接获取数据
            不同源情况下，postMessage 方法 和 message 事件的方式进行通信
              postMessage方法，用来发送数据
              message事件，用来接受数据
            
            主应用和子应用不同源，父应用就不能获取子应用的任何内容
            同源：协议名、域名、端口号三者必须完全一致
          3. 应用
            前端微应用 qiankun / micro
      */
    </script>
  </body>
</html>
